<template>
  <view class="newsList" ref="container">
	<view class="splitline"></view>
	<view class="newstype">
		<view class="newstype_span" :class="currentClass1" @click="getArticleListsByCid('公司新闻',1)">公司新闻</view>
		<view class="newstype_span" :class="currentClass2" @click="getArticleListsByCid('行业报道',2)">行业报道</view>
	</view>
    <view class="list" v-for="(item, articleListIndex) in articleListbyCid" :key="articleListIndex">
      <view @click="goNewsDetail(item)" class="item acea-row row-between-wrapper">
        <view class="text acea-row row-column-between">
          <view class="name line2">{{ item.title }}</view>
          <view>{{ item.addTime }}</view>
        </view>
        <view class="pictrue">
          <image :src="item.imageInput" />
        </view>
      </view>
    </view>

    <!--暂无新闻-->
    <view class="noCommodity" v-if="articleListbyCid.length === 0 && page > 1">
      <view class="noPictrue">
        <image src="@/static/images/noNews.png" class="image" />
      </view>
    </view>
    <!--</Tab>-->
    <!--</Tabs>-->
  </view>
</template>
<script>
import { getArticleList } from "@/api/public";

export default {
  name: "NewsList",
  components: {},
  props: {},
  data: function() {
    return {
      page: 1,
      limit: 20,
      loadTitle: "",
      loading: false,
      loadend: false,
	  currentClass1:'current',
	  currentClass2:'',
      imgUrls: [],
      navLsit: [],
      articleList: [],
	  articleListbyCid: [],
      active: 0,
      cid: 0,
      swiperNew: {
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        },
        autoplay: {
          disableOnInteraction: false,
          delay: 2000
        },
        loop: true,
        speed: 1000,
        observer: true,
        observeParents: true
      }
    };
  },
  mounted: function() {
    // this.articleBanner();
    //this.articleCategory();
    this.getArticleLists();
	this.getArticleListsByCid("公司新闻");
    //   this.$scroll(this.$refs.container, () => {
    //     !this.loading && this.getArticleLists();
    //   });
  },
  onReachBottom() {
    !this.loading && this.getArticleLists();
  },
  methods: {
    goNewsDetail(item) {
      this.$yrouter.push({
        path: "/pages/shop/news/NewsDetail/index",
        query: { id: item.id }
      });
    },
	getArticleListsByCid:function(cid,index){
		
		let that = this;
		if(index==1){
			that.currentClass1="current";
			that.currentClass2="";
		}else if(index==2){
			that.currentClass2="current";
			that.currentClass1="";
		}
		that.articleListbyCid=[];
		setTimeout(() => {
		  for(var i=0;i<that.articleList.length;i++){
		  	if(that.articleList[i].cid==cid){
		  		
		  		that.articleListbyCid.push(that.articleList[i]);
		  	}
		  }
		}, 200)
		
		
		
	},
    getArticleLists: function() {
      let that = this;
      if (that.loading) return; //阻止下次请求（false可以进行请求）；
      if (that.loadend) return; //阻止结束当前请求（false可以进行请求）；
      that.loading = true;
      let q = {
        page: that.page,
        limit: that.limit
      };
      getArticleList(q).then(res => {
        that.loading = false;
        //apply();js将一个数组插入另一个数组;
        that.articleList.push.apply(that.articleList, res.data);
        that.loadend = res.data.length < that.limit; //判断所有数据是否加载完成；
        that.page = that.page + 1;
      });
    },
    onClick: function(name) {
      if (name === 0) this.articleHotList();
      else {
        this.cid = this.navLsit[name].id;
        this.articleList = [];
        this.page = 1;
        this.loadend = false;
        this.loading = false;
        this.getArticleLists(name);
      }
    }
  }
};
</script>
